<template>
  <div>
    <div class="title">添加区域划分:</div>
    <el-form ref="form" :model="form" label-width="80px" class="form">
       <el-form-item label="添加区域">
           <el-input v-model="form.region" class="input"></el-input>
       </el-form-item>
       <el-form-item>
           <el-button type="primary" @click="createRegion" class="btn">添加</el-button>
       </el-form-item>
    </el-form>
    <div class="line"></div>
    <div class="title">区域划分明细</div>
    <el-tooltip v-for="tag in tags" :key="tag.name" :content="formater(tag.createTime)" placement="top">
        <el-tag  closable @close="deleteArea(tag.id)" class="list">
            {{tag.name}}
        </el-tag>
    </el-tooltip>

  </div>
</template>
<script>
import { createArea, getList, deleteArea } from '@/api/table'
import { Message } from 'element-ui'
import { formatDate } from "@/utils/dateformat"

export default {
  data() {
    return {
      form: {
        region: ''
      },
      tags:[]
    }
  },
  created() {
    console.log('进入区域划分页')
    this.getData()
  },
  methods: {
    getData() {
        getList().then(response => {
            if(response.code === 200){
                this.tags = response.data
            }
        }).catch(error => {

        })
    },
    formater(date){
       return formatDate(date)
    },
    createRegion() {
        console.log(this.form.region)
        if (this.form.region){
            createArea({
                region: this.form.region
            }).then(response => {
                this.getData()
                this.form.region = ''
            }).catch(error => {
                Message({
                    message: '区域创建失败',
                    type: 'error',
                    duration: 5*1000
                })
            })
        }else{
            Message({
                message: '请输入区域名称',
                type: 'error',
                duration: 5*1000
            })
        }
    },
    deleteArea(id){
        console.log('删除操作'+id)
        deleteArea({ id }).then(response => {
            if(response.code === 200){
                this.getData()
            }else{
                Message({
                    message: '删除失败',
                    type: 'error',
                    duration: 3*1000
                })
            }
        }).catch(error => {
            Message({
                message: '删除失败',
                type: 'error',
                duration: 3*1000
            })
        })
    }
  }
}
</script>
<style>
.title{
    font-family: "微软雅黑";
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 30px;
}
.form{
    margin-left: 30px;
}
.input{
    width: 400px;
}
.btn{
    width: 200px;
}
.line{
    background-color: lightgray;
    width: 96%;
    height: 1px;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 50px;
}
.list{
    margin-left: 30px;
}
</style>
